<template>
  <div class="search-list">
      <div class="headers">
        <SearchHeader></SearchHeader>
        <ul>
          <li v-for="(item,index) in searchList.data" :key="index" @click="changeTab(index)">
            <div :class="searchList.currentIndex == index ? 'active':''">{{item.name}}</div>
            <div class="search-fliter" v-if="index != 0">
              <i class="iconfont icon-shangxiazuoyouTriangle13" :class="item.status == 1 ? 'active':''"></i>
              <i class="iconfont icon-shangxiazuoyouTriangle11" :class="item.status == 2 ? 'active':''"></i>
            </div>
          </li>
        </ul>
      </div>
        <section class="wrapper">
          <ul v-if="goodList.length">
            <li v-for="(item,index) in goodList" :key="index">
              <img v-lazy="item.imgUrl" alt="">
              <h3>{{item.name}}</h3>
              <div class="price">
                <div><span>￥</span><b>{{item.price}}</b></div>
                <div>立即购买</div>
              </div>
            </li>
          </ul>
          <h1 v-else>暂无数据</h1>
        </section>
        <Tabbar></Tabbar>
  </div>
</template>

<script>
import BetterScroll from 'better-scroll'
import http from '@/common/api/request.js';
import SearchHeader from '@/components/search/SearchHeader.vue';
import Tabbar from '@/components/common/Tabbar.vue';
export default {
    name:'Search-List',
    data () {
      return {
        goodList:[],
        searchList:{
          currentIndex:0,
          data:[
            /**
             * status:0 都不亮
             * status:1 上箭头亮
             * status:2 下箭头亮
             */
            {name:'综合',key:'zh'},
            {name:'价格',status:0,key:'price'},
            {name:'销量',status:0,key:'num'}
          ]
        }  
      }
    },
    components: {
      SearchHeader,
      Tabbar
    },
    created () {
      this.getData();
    },
    methods: {
      getData(){
        http.$axios({
          url:'/api/goods/shopList',
          params:{
            searchName:this.$route.query.key,
            ...this.orderBy
          }
        })
        .then(res=>{
          this.goodList = res;
        });
        this.$nextTick(()=>{
            this.oBetterScroll = new BetterScroll('.wrapper', {
                movable:true,
                zoom:true
            });
        }); 
      },
      changeTab(index){
        this.searchList.currentIndex = index;
        //点击的下标对应的数据时哪一个
        let item = this.searchList.data[index];
        //取消所有的状态值
        this.searchList.data.forEach((v,i)=>{
          if(i!=index){
            v.status = 0;
          }
        });
        //当前点击的改变状态
        if(index == this.searchList.currentIndex){
          item.status = item.status == 1 ? 2 : 1;
        }
        //发送请求进行数据排序渲染
        this.getData();
      } 
    },
    watch: {
        $route(){
          this.getData();
        }
    },
    computed: {
      orderBy(){
        //知道当前时哪个对象
        let obj = this.searchList.data[this.searchList.currentIndex];
        //针对状态判断是升序还是降序
        let val = obj.status == 1 ? 'asc' : 'desc';
        return {
          [obj.key]:val
        }
      }
    }
}
</script>

<style scoped>
.search-list{width: 100vw;height: 100vh;display: flex;flex-direction: column;overflow: hidden;}
section{flex: 1;overflow: hidden;}
section ul{display: flex;flex-wrap: wrap;justify-content: space-between;}
section ul li{display: flex;flex-direction: column;justify-content: center;align-items: center;width: 50%;padding: .266667rem;box-sizing: border-box;}
section ul li .price{display: flex;justify-content: space-around;width: 100%;padding: .266667rem 0;font-size: .373333rem;}
section ul li .price div:first-child span{color: #b0352f;font-size: .32rem;}
section ul li .price div:first-child b{color: #b0352f;font-size: .426667rem;}

section ul li .price div:last-child{color: #fff;background: #b0352f;padding: .08rem .16rem;border-radius: 6px;}
section ul li h3{width: 93%;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;font-size: .373333rem;text-align: center;color: #222;font-weight: 400;}
section ul li img{width: 4.533333rem;height: 4.533333rem;}
section ul li img[lazy=loading] {background: #f7f7f7;}
.headers ul{display: flex;justify-content: space-around;padding: .133333rem 0;font-size: .426667rem;box-shadow:0 1px 10px 1px #ddd;} 
.headers ul li{display: flex;align-items: center;}
.headers ul li .search-fliter{display: flex;flex-direction: column;margin-left: .08rem;}
.headers ul li .search-fliter i{font-size: .32rem;}
.active{color: #b0352f;}
</style>